<template>
	<view class="content body">
		<!-- 公告 -->
		<u-notice-bar :text="Text" fontSize="18px"></u-notice-bar>
		<!-- 轮播 -->
		<view class="swipe">
			<u-swiper :list="swiperlist" height='180px' interval='2000' circular>
			</u-swiper>
		</view>

		<!-- 小图标部分 -->
		<view class="img_flex">
			<view v-for=" item,index in calculate" :key="index">
				<view class="u--image">
					<u--image :showLoading="true" :src="item.src" width="70px" height="70px" radius="20px"
						@click="OnClickCount(index)">
					</u--image>
				</view>
				<view class="writing" @click="OnClickCount(index)">
					{{item.writing}}
				</view>
			</view>
		</view>

		<!-- 文章列表 部分 -->

		<view class="hom_wenzhang">
			<ul>
				<li v-for="item ,index in article" :key="index" @click='Onarticleskip(index)'>
					<view class="hom_wenzhang_left">
						<u--image :showLoading="true" :src="item.titlimg" width="125px" hight="100px">
						</u--image>
					</view>
					<view class="hom_wenzhang_right">
						<view class="hom_wenzhang_title">{{item.title}}</view>
						<view class="home_wenzhang_duanluo">{{item.titlecontent}}</view>
					</view>
				</li>
			</ul>
		</view>


		<!--  广告框部分 -->
		<u-overlay :show="show" opacity="0.2" @click="show = true" v-show="showadvertising">
			<view class="advertising" @tap.stop>

				<view class="close">
					<view>
						<!-- #ifdef H5 -->
						<u-link href="https://haokan.baidu.com/v?pd=wisenatural&vid=8102470930620950910" color="#000"
							text="关闭广告">
						</u-link>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="advertisingclose" @click="closeadvertising">
							点击关闭广告
						</view>
						<!-- #endif -->

					</view>
					<!-- 广告窗口图标 -->
					<u-icon name="close" color="#000" size="30" @click="onClickShow"></u-icon>
				</view>
				<view class="advertising_text">
					世界上只有懒女人，没有丑女人。所以那些说自己丑的女人，其实你不是真的丑，你只是懒。如果肯好好的收
					拾下自己，你也可以很漂亮的。那我们就从美甲开始吧。
				</view>
			</view>
		</u-overlay>

		<custom-tabbar :current="0"></custom-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				Text: '本小程序处于初步发展阶段，欢迎大家提出宝贵意见，在接下来的版本中我们将不断完善，有任何关于健身减肥方面的问题，可以随时联系我们;我们抱以热忱，以科学严谨的态度为每一位用户服务!',
				// 搜索关键字
				keyword: '',
				//广告显示隐藏
				showadvertising: false,
				//轮播图图片列表
				swiperlist: [
					'https://gd-hbimg.huaban.com/aff9990f3761304b1085677c8323018424c40b82305e7-hesD7q_fw240webp',
					'https://gd-hbimg.huaban.com/a0621d53b02d4c7f175b6f3cf000348bfda228a4ed79-QlMInK_fw658webp',
					'https://gd-hbimg.huaban.com/6b030486e33e60c7635f3de3cfe2df1a844ae1b175cf1-6nGBmw_fw240webp',
					'https://gd-hbimg.huaban.com/cda20d50ed0940e9fea5a7514443300e153e8d064678b-wRdyl6_fw240webp'
				],
				//计算图标数据
				calculate: [{
						id: 1,
						src: "https://img2.baidu.com/it/u=2910003033,2611004182&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=350",
						writing: '健康体重'
					}, {
						id: 2,
						src: "https://img.mp.sohu.com/q_mini,c_zoom,w_640/upload/20170713/c3e75cbe91504c32be5f0e06543dc1b5.jpg",
						writing: '基础代谢'
					}, {
						id: 3,
						src: "https://img2.baidu.com/it/u=3665018384,1068332404&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
						writing: 'BMI指数'
					},
					{
						id: 4,
						src: "https://img95.699pic.com/xsj/1n/o0/3k.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast",
						writing: '运动消耗'
					}
				],
				//首页文章列表
				article: [{
						id: 1,
						titlimg: 'https://img1.baidu.com/it/u=3650166594,3606348973&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=464',
						title: '健身初学者怎么减脂训练？',
						titlecontent: '合适的运动强度运动强度一定要适合自己，要选择中低强度的运动，不要选择一些高强度的剧烈运动。运动太剧烈，实际上消耗的大部分是糖和水份，并且运动时很容易产生饥渴和饥饿，很容易增大食量，达不到减肥的效果。所以我们应该选择一些运动时心率小于150次/秒的运动，并不时运动量越大效果越明显'
					},
					{
						id: 2,
						titlimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201512%2F18%2F20151218163153_wQ43F.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1679747123&t=9278cdfab9cd06d6e6c08506044504b8',
						title: '运动减肥，新手必知减肥...',
						titlecontent: '首先，减脂和增肌不能同时进行，增肌需要超量摄入热量，会伴随着脂肪的生长，与减脂是一个相悖的过程。所以，想真正增肌的同学应该去遵循增肌计划，而不是减脂计划。第二，运动是全身性的，虽然器械分离训练是可以强化肌肉和力量。但是由于没有超量的补充回复，且大量的有氧运动本就对肌肉是一种消耗。所以想要塑形就应该进行全身训练。'
					},
					{
						id: 3,
						titlimg: 'https://img.gzxdf.com/uploads/gzxdf/allimg/190910/11-1Z910145254E8.jpg ',
						title: '掌握这些饮食方法就成功...',
						titlecontent: '七分靠吃，三分靠练。这是健身减脂公认的一点。作为健身者的你如何安排饮食才能达到最好的健身减脂效果呢？本文介绍一些健身者的饮食方法，让你在你的健身路上找准方向，按照这样的饮食方法执行健身饮食，你就能比别人更快看到效果'
					}, {
						id: 4,
						titlimg: 'https://5b0988e595225.cdn.sohucs.com/images/20181110/274bb4639cd74b77b7263db575496737.jpeg',
						title: '健身完吃什么最好 吃得不... ',
						titlecontent: '健身完吃的临时餐，吃一些酸奶、香蕉、坚果都可以，另外60-120分钟左右可进食'
					}
					// {
					// 	id: 5,
					// 	titlimg: 'https://5b0988e595225.cdn.sohucs.com/images/20181110/274bb4639cd74b77b7263db575496737.jpeg',
					// 	title: '经期特殊性，教你如何利用... ',
					// 	titlecontent: '月经完后减肥，所谓的经期减肥，就是女性在月经期利用月经期的一些特殊性，将瘦身分成四期，分别是月经后的1-7天称为瘦身福利期、月经后的第7-14天称为瘦身超速期、月经后的第14-21天称为瘦身平快期、以及月经后的第21-28天称为瘦身缓慢期'
					// }
				]



			}

		},
		onLoad() {

		},
		onShow() {
			console.log(123);
			//广告定时
			setTimeout(() => {
				this.showadvertising = true
			}, 1000)

		},
		methods: {
			closeadvertising() {
				uni.navigateTo({
					url: '/pages/feedBack/feedBack'
				})
			},
			// 点击icon 关闭广告框
			onClickShow() {
				this.show = false
				this.showadvertising = false
			},
			Onarticleskip(index) {
				console.log(index);
				if (index == 0) {
					uni.navigateTo({
						url: './article1/article1'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: './article2/article2'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: './article3/article3'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: './article4/article4'
					})
				}
			},
			OnClickCount(index) {
				console.log(index);
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/index/healthwight/healthwight'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages/index/basicmetabolism/basicmetabolism'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/index/mbiindex/mbiindex'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/exercise/exercise'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.body {
		background-color: #fff;
	}

	.swipe {
		margin: 10px 0px;
	}

	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
	}

	.advertisingclose {
		color: #000;
		font-size: 16px;
		margin-top: 5px;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}



	.img_flex {
		/* width: 600px; */
		display: flex;
		/* justify-content: baseline; */
		/* justify-content: space-between; */
		justify-content: space-around;
		flex-wrap: nowrap;
		/* background-color: green; */
		margin-top: 10px;
	}

	.img {
		display: inline-block;
		margin: 5px;
	}

	.writing {
		font-size: 16px;
		margin-top: 10px;
		// font-weight: bold;

	}

	.hom_wenzhang {
		margin: 10rpx;
		padding: 10px;
	}

	ul {
		padding: 0;
	}

	li {
		list-style: none;
		display: flex;
		/* align-items: center; */
		justify-content: space-between;
	}

	.hom_wenzhang_left {
		margin: 10rpx
	}

	.hom_wenzhang_right {
		margin: 10rpx
	}

	.hom_wenzhang_title {
		font-size: 16px;
		margin-bottom: 10rpx;
		/*强制文本在一行内显示*/
		/* white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; */
	}

	// /deep/.u-image {
	// 	height: 110px !important;
	// }

	.u--image {
		// &:nth-last-child(1) {
		// 	height: 75px;
		// }
	}

	.home_wenzhang_duanluo {
		font-size: 14px;
		line-height: 18px;
		text-indent: 2em;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 限制在一个块元素显示的文本的行数 */
		/* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
		-webkit-line-clamp: 5;
		/* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-box-orient: vertical;
	}

	.advertising {
		/* margin: 10px; */
		/* text-align: center;                                                                                                                                                                                                                                                                                                                                                               */
		position: absolute;
		top: 130px;
		left: 0;
		/* width: rpx; */
		/* position: relative; */
		margin-top: 20px;
		width: 100%;
		height: 35%;
		background: url('https://gd-hbimg.huaban.com/e4ce1a7cc25d649a7c43e6b853ad5cfa585195f413fff-sA242f_fw658webp') center no-repeat;
		/* opacity: 0.9; */
		background-size: cover;
	}

	.close {
		display: flex;
		font-size: 12px;
		color: #fff;
		position: absolute;
		top: 10rpx;
		right: 10px;
	}

	.advertising_text {
		margin: 20px;
		/* 	width: 320px;
		height: 200px; */
		color: #fff;
		margin-top: 40px;
		text-indent: 20px;
		/* margin-top: 10px; */
		/* padding: 10px; */

	}

	.top {
		margin-top: 2rpx;
	}
</style>
